<template>
  <div class="user">
    <!-- 使用headlineVue组件 -->
    <v-headline :value="text"></v-headline> 

    <!-- eCharts -->
    <div id="myChart"></div>

    <!-- 搜索框容器 -->
    <div class="header">
      <el-input
          class="search-box"
          placeholder="对名字进行模糊搜索"
          prefix-icon="el-icon-search"
          v-model="searchName"/>
    </div>

    <!-- 悬浮球组件 -->
    <div class="FloatBtn">
      <FloatBtn/>
    </div>
    
    <!-- 表格 -->
    <div class="content">
      <el-table
        :data="showTableData"
        border
        stripe
        style="width: 100%"
        highlight-current-row>
          <el-table-column type="index" width="50" label="序号"/>
          <template v-for="item in list">
            <el-table-column :prop="item.prop" :label="item.label" :key="item.id" />
          </template>
      </el-table>
    </div>

  </div>
</template>

<script>
import api from '../../api/index.js';
import * as echarts from 'echarts'; 
import headline from './headline.vue'; // 引入组件-标题
import FloatBtn from '../../src/components/FloatBtn';//悬浮按钮

export default {
    name: 'UserData',
    components:{
        'v-headline':headline, //挂载组件-标题
        echarts,
        FloatBtn,
    },
    data(){
        return {
            text:'用户数据',
            tableData: [],
            searchName: "",
            list:[
              {id:1,prop:"name",label:"姓名"},
              {id:2,prop:"account",label:"编号"},
              {id:3,prop:"number",label:"电话号"},
              {id:4,prop:"grade",label:"等级"},
              {id:5,prop:"date",label:"日期"},
            ]
        }
    },
    methods:{
      // eChart
      getAttendanceData(){
        this.$nextTick(()=>{
          let dom = echarts.init(document.getElementById("myChart"));
            dom.setOption({
              title: {
                text: '新用户激活数据图',
                subtext: 'Demo 虚构数据',
                x: 'center'
              },
              legend: {
                orient: 'horizontal',
                x: 'left',
                y: 'top',
                data: ['猜想','预期','实际']
              },
              grid: {
                  top: '20%',  
                  left: '3%', 
                  right: '10%',
                  bottom: '5%',
                  containLabel: true
              },
              xAxis: {
                name: '月份',
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
              },
              yAxis: {
                name: '人次',
                type: 'value',
                min:0, // 配置 Y 轴刻度最小值
                max:4000,  // 配置 Y 轴刻度最大值
                splitNumber:7,  // 配置 Y 轴数值间隔
              },
              series: [ // 多组折线图数据
                {
                  name: '猜想',
                  data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
                  type: 'line'         
                },
      
                {
                  name: '预期',
                  data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
                  type: 'line',
                },
       
                {
                  name: '实际',
                  data: [1107,1352,1740,1968,1647,1570,1343,1757,2547,2762,3170,3665],
                  type: 'line'
                }
              ],
              color: ['#3366CC', '#FFCC99','#99CC33']
            })
        });
      }
    },
    computed:{
      // 表格显示数据
      showTableData(){
        return this.tableData.filter((d)=>d.name.includes(this.searchName))
      }
    },
    created() {
      this.getAttendanceData(); 
      // 获取全部数据
      api.xuData.getUserDataPro().then((res)=> {
        this.tableData = res.data
      })
    }, 
    mounted(){},
    // echarts  页面渲染时，组件等部分dom元素渲染不出，解决：放在updated里
    updated(){}
};
</script>

<style scoped lang='less'>
#myChart {
      width: 100%;
      height: 300px;
}
.FloatBtn{
    float: right;
    margin-right: 50px;
}
</style>